<template>
  <div class="dashboard-container">
    <div v-if="user.roleName == '企业用户'">
      <div class="dashboard-editor-container">
        <div class="flex flex-row mb-5" style="width: 40%;">
          <div @click="enterChildPage('landlord')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-1">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center justify-center">本企业诉求</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ demandsEnt }}<span
                class="font-18">条</span></div>
            </div>
          </div>
          <div @click="enterChildPage('recruit')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-2">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center justify-center">本企业招聘信息</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ recruit }}<span
                class="font-18">条</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="dashboard-editor-container">
        <div class="flex flex-row mb-5">
          <div @click="enterChildPage('aboveScale')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-1">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center justify-center">规上企业</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ stats.guishang }}<span
                class="font-18">家</span></div>
            </div>
          </div>
          <div @click="enterChildPage('key')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-2">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center justify-center">产值超亿元重点企业</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ stats.czcyy }}<span
                class="font-18">家</span></div>
            </div>
          </div>
          <div @click="enterChildPage('highTechnology')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-3">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center justify-center">高新技术企业</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ stats.ctp }}<span
                class="font-18">家</span></div>
            </div>
          </div>
          <div @click="enterChildPage('specialized')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-4">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center justify-center">外资企业</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ stats.foreign }}<span
                class="font-18">家</span></div>
            </div>
          </div>
          <div @click="enterChildPage('specialized')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-1">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center justify-center">专精特新企业</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ stats.zjtx }}<span
                class="font-18">家</span></div>
            </div>
          </div>
          <div @click="enterChildPage('annovation')" class="flex flexBox flex-1 bg-pink num-box mr-2 home-bg-2">
            <div class="flex  flex-column flex-1 " style="height: 100%;">
              <div class="flex flex-1 font-18 text-white align-center ">企业技术创新载体</div>
              <div class="flex flex-1 number text-white my-2 justify-center align-baseline">
                {{ stats.jscxzt }}<span
                class="font-18">家</span></div>
            </div>
          </div>
        </div>
        <div>
          <el-row :gutter="24">
            <el-col :span="10">
              <div class="white-box" style="height:500px;">
                <div id="main4" style="height:500px;display: inline-block;width: 100%"></div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="white-box" style="height:500px;">
                <div id="main1" style="height:500px;display: inline-block;width: 100%"></div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="white-box" style="height:500px;">
                <div id="main3" style="height:500px;display: inline-block;width: 100%"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import crud from '@/mixins/crud'
import home from "@/api/home/home";

import echarts1 from '@/mixins/echarts1.js'
import echarts2 from '@/mixins/echarts2.js'
import echarts3 from '@/mixins/echarts3.js'

import { mapGetters } from 'vuex';
import store from '@/store'

export default {
  name: 'Dashboard',
  mixins: [crud],
  components: {},
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      demands:[],
      chartPie: null,
      chartBar: null,
      chartBar2: null,
      demandTypeName: [],
      stats: [],
      demandsPie: [],
      demandsDate: [],
      date: [],
      countByDate: [],
      demandsDep: [],
      deptName: [],
      count2:[],
      demandsEnt: 0,
      recruit: 0
    }
  },
  mounted() {
    if (this.user.roleName != '企业用户'){
      this.initchart()
      this.getDemandsDate()
      this.getDemandsPie()
      this.getDemandsDep()
      window.addEventListener("resize", () => {
        this.chartPie.resize();
        this.chartBar2.resize();
        this.chartLine.resize();
      });
    }
    
  },
  created() {
    store.dispatch('GetInfo')
    if (this.user.roleName == '企业用户'){
      this.getDemandsEnt()
      this.getRecruit()
    }
    else{
      this.getStats()
    }
  },
  methods: {
    initchart() {
      this.chartPie = echarts.init(document.getElementById('main1'))
      this.chartBar2 = echarts.init(document.getElementById('main3'))
      this.chartLine = echarts.init(document.getElementById('main4'))
    },
    getStats() {
      home.getStats().then(res => {
        this.stats = res.data
      })
    },
    getDemandsPie() {
      home.getDemandsPie().then(res => {
        this.demandsPie = res.data
        this.demandsPie.forEach((val, index) => {
          if ('typeName' in val){
            val['value'] = val['total']
            val['name'] = val['typeName']
          }
        })
        this.chartPie.setOption(echarts1.setOption(this.demandsPie))
      })
    },
    getDemandsDep() {
      home.getDemandsDep().then(res => {
        this.demandsDep = res.data
        this.demandsDep.forEach((val, index) => {
          this.deptName.push(val.departmentName)
          this.count2.push(val.demandCount)
        }),
        this.chartBar2.setOption(echarts2.setOption(this.deptName,this.count2))
      })
    },
    formatDate(str){
      const parts = str.split('-');
      const year = parseInt(parts[0], 10);
      const month = parseInt(parts[1], 10) - 1;
      const date = new Date(year, month)
      return date;
    },
    getDemandsDate() {
      home.getDemandsDate().then(res => {
        this.demandsDate = res.data
        this.demandsDate.forEach((val, index) => {
          this.date.push(this.formatDate(val.month))
          this.countByDate.push(val.count)
        })
        this.displayNone(this.date);
        // this.chartLine.setOption(echarts3.setOption(this.date,this.countByDate))
      })
    },
    enterChildPage(page){
      if (this.user.roleName == '企业用户'){
        if (page == 'recruit'){
        this.$router.push('/business/' + page)
        }
        else{
          this.$router.push('/business/' + page)
        }
      }
      else{
        this.$router.push('/business/enterprise/' + page)
      }
    },
    getDemandsEnt(){
      home.getDemandsEnt().then(res => {
        this.demandsEnt = res.data
      })
    },
    getRecruit(){
      home.getRecruit().then(res => {
        this.recruit = res.data
      })
    },
    displayNone(date){
      if (date.length == 0){
        const dom = document.getElementById('main4');
        dom.innerHTML = '每月诉求数统计<br>-暂无相关数据-';
        dom.style.cssText = 'text-align:center; color: #999; border: none;line-height: 150px;';
        dom.removeAttribute('_echarts_instance_');
      }
      else{
        const chartLine = document.getElementById('main4');
        chartLine.setAttribute('_echarts_instance_', '');
        this.chartLine = echarts.init(chartLine);
        this.chartLine.setOption(echarts3.setOption(this.date,this.countByDate))
      }
    }
  },
  watch: {
    '$store.state.app.sidebar': {
      handler(newVal, oldVal) {
        if (this.user.roleName != '企业用户'){
          setTimeout(re=>{
            this.chartPie.resize();
            this.chartBar2.resize();
            this.chartLine.resize();
          },100)
        }
      },
    deep: true // 深度监听
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #EAF0FF;
}

::v-deep .el-table thead tr th {
  background: #5A89FF;
  color: #fff
}

.dashboard-editor-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.number {
  font-size: 45px;
}

.num-box {
  border-radius: 18px;
  padding: 25px 35px 30px 35px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}

.flexBox {
  cursor: pointer;
}

.flexBox:hover div {
  color: gray;
  transition: color 0.3s;

}

.white-box {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px #D4D4D4;
}

::v-deep #tab-0 {
  padding: 0 20px
}

</style>
